<template>
  <div class="pending">
    <div class="formSearch">
      <el-button type="primary" @click="addActivity">新增</el-button>
    </div>
    <!-- 表格 -->
    <el-table
      v-loading="loading.table"
      :data="tableData"
      border
      :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
      tooltip-effect="dark"
      style="width: 100%"
      class="dataTable"
    >
      <el-table-column label="活动名称" prop="sceneName" width="220" />
      <el-table-column label="营销类型" show-overflow-tooltip>
        <template #default="scope">
          <span v-if="scope.row.sceneType === 1">节日营销</span>
          <span v-if="scope.row.sceneType === 2">会员日营销</span>
          <span v-if="scope.row.sceneType === 3">生日营销</span>
        </template>
      </el-table-column>
      <el-table-column label="活动时间" prop="time" show-overflow-tooltip />
      <el-table-column label="状态" show-overflow-tooltip>
        <template #default="scope">
          <span v-if="scope.row.state === 0">未开始</span>
          <span v-if="scope.row.state === 1">进行中</span>
          <span v-if="scope.row.state === 2">已停止</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template #default="scope">
          <div class="btnList">
            <el-button
              type="primary"
              link
              @click="editActivity(scope.row.sceneId)"
            >编辑</el-button>
            <el-popconfirm
              v-if="scope.row.state !== 1"
              title="是否确定删除该场景营销？"
              @confirm="delScene(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  type="danger"
                >删除</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
              v-if="scope.row.state === 2"
              title="是否确定启动该场景营销？"
              @confirm="startStopFn(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  type="success"
                >启动</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
              v-if="scope.row.state === 1"
              title="是否确定停止该场景营销？"
              @confirm="startStopFn(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  type="danger"
                >停止</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :total="page.total"
      style="margin: 12px 0;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 新增活动 -->
    <SceneForm
      ref="sceneFormRef"
      @reset="reset"
    />
  </div>
</template>

<script setup>
import { defineComponent, onMounted, reactive, ref } from 'vue'

import SceneForm from '@/views/marketing/scene/form.vue'
import { getShopId } from '@/utils/auth'
import {
  getSceneInfo,
  sceneDelete,
  sceneStart,
  sceneStop,
} from '@/api/marketing'

import { useActivityHooks } from '@/views/marketing/hooks/dialogHooks.js'
defineComponent({
  name: 'ActivityScene'
})

const sceneFormRef = ref(null)
const {
  addActivity,
  editActivity,
  reset,
} = useActivityHooks({
  ref: sceneFormRef,
  resetCallbck: getAll
})

const loading = reactive({
  table: false
})

let page = reactive({
  page: 1,
  pageSize: 10,
  total: 0
});
let tableData = ref([]);
// 初始化查询所有数据
function getAll () {
  loading.table = true
  getSceneInfo(page).then(res => {
    tableData.value = res.data.list
    page.total = res.data.total
  }).finally(() => {
    loading.table = false
  })
}
function handleCurrentChange (val) {
  page.page = val
  getAll()
}

function handleSizeChange (val) {
  page.pageSize = val
  getAll()
}

// 停止场景营销活动
function startStopFn (row) {
  let params = {
    sceneId: row.sceneId,
    shopId: parseInt(getShopId())
  }
  if (row.state === 1) {
    sceneStop(params).then((res) => {
      if (res.code === '') {
        ElMessage.success('停止成功')
        page.page = 1
        getAll()
      }
    })
  } else {
    sceneStart(params).then(
      (res) => {
        if (res.code === '') {
          ElMessage.success('启用成功')
          page.page = 1
          getAll()
        }
      }
    )
  }
}

// 删除
function delScene (data) {
  sceneDelete({ sceneId: data.sceneId }).then((res) => {
    if (res.code === '') {
      ElMessage.success('删除成功')
      page.page = 1
      getAll()
    } else {
      ElMessage.error(res.message)
    }
  })
}
onMounted(() => {
  getAll();
})
</script>

<style lang="scss" scoped>
.pending {
  padding: 20px;
  margin-top: 20px;
  background-color: #FFFFFF;
}
.formSearch{
  margin-bottom: 20px;
}
</style>